<template>
<div class="page_list" ref="park_d" v-loading='loading' element-loading-background="rgba(0, 0, 0, 0.5)" element-loading-text="正在加载">
  <search @change='change'/>
  <div class="zhan"></div>
  <van-pull-refresh class="refresh_div" v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      class="list_div"
      @load="onLoad"
    >
      <div class="item_p" v-for="(item,index) in list" :key='index' @click="toPDetail(item)">
        <div class="name1">
          <div class="name">{{item.policy_name}}</div>
          <div class="info">{{item.type_name}}｜{{item.expense_type}}</div>
          <div class="" style="text-align: right; color: #ff9933; font-size: 14px;" v-if="item.from">{{item.from}}</div>
        </div>
      </div>
    </van-list>
  </van-pull-refresh>
  <back/>
</div>
</template>
<script>
import search from '../components/search.vue'
import back from '../components/back.vue'
import {policy} from '@/api/api'
export default {
  components: { search,back },
  data(){
    return{
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      query:{
        keywords:'',
        chain_id:'',
        city_id:'',
        page:0
      },
      top:0
    }
  },
  created(){

  },
  activated(){
    this.$refs.park_d.scrollTop =  this.top 
  },
  methods:{
    onLoad(){
      this.query.page += 1
      this.loading = true
      policy.getList(this.query).then(res=>{
        if(res.data.length==0){
          this.loading = false
          this.finished = true
          this.refreshing = false
          this.list = []
          return
        }
        if(this.query.page==1){
          this.list = res.data.data
        }else{
          this.list = this.list.concat(res.data.data)
        }
        this.loading = false
        this.refreshing=false
        if(res.data.last_page<=this.query.page){
          this.finished = true
        }
      })
    },
    change(query){
      this.finished = false
      this.query = query
      this.query.page = 0
      this.list = []
      this.onLoad()
    },
    onRefresh() {
      this.finished = false;
      this.query.page = 0
      this.onLoad();
    },
    toPDetail(item){
      this.top = this.$refs.park_d.scrollTop 
      this.$router.push({name:'pDetail',query:{id:item.id}})
    },
  }
}
</script>
<style lang="scss" scoped>
.zhan{
  height: 100px;
  width: 100%;
}
.m_b4{
  margin-bottom: 4px;
  margin-top: 4px;
}
.page_list{
  height: 100%;
  overflow: auto;
  background: #f3f3f3;
}
.list_item{
  width: calc(100% - 20px);
  margin: 10px 10px;
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  .item_logo{
    max-width: 60px;
    min-width: 60px;
    img{
      width: 100%;
    }
  }
  .big_t{
    font-size: 16px;
    color: #111;
  }
  .info_div{
    width: calc(100% - 110px);
    .small_t{
      font-size: 14px;
      margin:4px 0;
      img{
        width: 20px;
        position: relative;
        top: 4px;
      }
      .biao_div{
        background: #ff9933;
        color: #fff;
        font-size: 12px;
        height: 14px;
        border-radius: 2px;
        padding: 1.5px 4px;
        margin-left: 4px;
      }
    }
  }
  .fen_div{
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background: #ff9933;
    color: #fff;
    font-size: 17px;
    border-radius: 15px;
  }
}
.item_p{
	// width: calc(100% - 68px);
	margin: 10px 22px;
	background: #FFFFFF;
		box-shadow: 0px 2px 2px 2px rgba(191, 191, 191, 1);
	border-radius: 6px;
	display: flex;
	padding: 12px;
	position: relative;
	img{
		width: 36px;
		height: 36px;
		margin-right: 8px;
	}
	.score{
		position: absolute;
		right: 10px;
		font-size: 10px;
		color: #333;
	}
	.name1{
		width: 100%;
	}
	.name{
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333;
		line-height: 21px;
	}
	.info{
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 17px;
	}
}
</style>